<script type="text/javascript">
    $(document).ready(function() {
        $('.viewport').mouseenter(function(e) {
            $(this).children('a').children('img').animate({ height: $(this).height()-5,left: '0', top: '0', width: $(this).width()-5}, 100);
            if($(this).attr('id') == "thematic")
           	{
           	 	slide("#thematictour", 25, 15, 200, .8);
           	}
           
        }).mouseleave(function(e) {
            $(this).children('a').children('img').animate({ height: $(this).height()+15,left: '-20', top: '-20', width: $(this).width()+15}, 100);
            if($(this).attr('id') == "thematic")
           	{		
            	slideoff("#thematictour");
           	}
        });
        slide("#thematictour", 25, 15, 50, .8);
        slideoff("#thematictour");
        $('#findtour').click(function(){
        	var baseURL ="/tour/tour/country/<?php echo $this->country; ?>/theme/";
    		var str="";
    		$('#thematictour input').each(function(){
    			if ($(this).is(":checked"))
    				str += $(this).val() + "_";
    		});
    		baseURL +=str;
    		window.location=baseURL;
        });
    });
    
    function slide(navigation_id, pad_out, pad_in, time, multiplier)
    {
    	// creates the target paths
    	var list_elements = navigation_id + " span";
    	var link_elements = list_elements + " label";
    	
    	// initiates the timer used for the sliding animation
    	var timer = 0;
    	
    	// creates the slide animation for all list elements 
    	$(list_elements).each(function(i)
    	{
        	$(this).show();
    		// margin left = - ([width of element] + [total vertical padding of element])
        	var flag =$(this).attr('flag');
    		$(this).css("margin-left","-180px");
    		// updates timer
    		timer = (timer*multiplier + time);
    		
    		$(this).animate({ marginLeft: "0px" }, timer);
    		
    		if (flag == "1")
    		{
    			$(this).animate({ marginLeft: "130px" }, timer);
    			$(this).animate({ marginLeft: "120px" }, timer);
        	}
    		else
    		{
    			$(this).animate({ marginLeft: "80px" }, timer);
    			$(this).animate({ marginLeft: "20px" }, timer);
    		}
    	});
    }
    function slideoff(navigation_id)
    {
    	var list_elements = navigation_id + " span";
    	$(list_elements).each(function(i)
    	{
        	$(this).hide();
    	});
    }
    
</script>

<div class="clear" ></div>
<div  style="width: 750px; margin-left: 50px;margin-top: 30px" >
	<?php foreach ($this->region as $region): ?>
		<div class="viewport" style="width: 275px;float: left;height: 235px;margin-left: 50px;margin-top: 50px" >
			<a  href="/default/countryguide/spot/country/<?php echo $this->country;?>/region/<?php echo $this->escape($region->id);?>" >
				<span class="dark-background" style="width: 270px;height: 230px;" ><?php echo $this->escape($region->name);?></span>
				<img style="width: 290px;height: 250px;" src="/files/images/region/<?php echo $this->escape($region->image);?>" alt="Multi Country Destination" />
			</a>
		</div>
	<?php endforeach; ?>
</div>